
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="apple-touch-fullscreen" content="YES" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <title>预约详情</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <link rel="stylesheet" href="/public/static/css/layer.css" >
    <!-- body 最后 -->
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
    <script src="/public/static/js/layer.js"></script>

    <link rel="stylesheet" href="/public/static/css/global.css">
    <link rel="stylesheet" href="/public/static/css/default.css">
    <link rel="stylesheet" href="/public/static/css/userInfo.css">
    <style>
        .card-header{padding:0px 0px 20px 0px;background-image: url("/public/static/images/my-bj1.jpg")}
        .card-header img{width:50px;height:50px;border-radius: 100px;margin:0 auto;}
        .circle{
            width: 50px;
            height: 50px;
            background-color:#86dda6;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            text-align: center;
            line-height: 50px;;
        }
        .circle a{
            color: #FFF;
            font-size: 16px;
        }
    </style>
</head>
<body class="mobile">
<div id="dg" style="z-index: 9999; position: fixed ! important; right: 5%; top: 80%;">
    <div class="circle">
        <a href="{:url(MODULE_NAME.\'/home\')}">主页</a>
    </div>
</div>
<div id="container">

    <div class="m-card my-info">
        <div class="card-head">
            <i class="icon-basic-info"></i>
            <span class="card-title">预约详情</span>
        </div>
        <div class="info-item">
            <div><span class="key">会员卡号</span><span class="val">{$data.membercard}</span></div>
            <div><span class="key">预约状态</span><span class="val">{:config('reserve_status')[$data.usage]}</span></div>
            <div><span class="key">预约日期</span><span class="val">{$data.reserve_date}</span></div>
            <div><span class="key">预约场次</span><span class="val">{:config('rfield')[$data.reserve_field]}</span></div>
            <div><span class="key">联系人</span><span class="val">{$data.name}</span></div>
            <div><span class="key">联系电话</span><span class="val">{$data.mobile}</span></div>
            <div><span class="key">大人</span><span class="val">{$data.adult}人</span></div>
            <div><span class="key">小孩</span><span class="val">{$data.kid}人</span></div>
            <div><span class="key">预约创建时间</span><span class="val">{$data.create_time}</span></div>
        </div>
    </div>
    {if condition="$residue > 0"}
    <div class="m-card my-info">
        <div class="info-item">
            <div class="time-item" style="display: flex;">取消预约倒计时：
                <strong id="minute_show" style="color: #e64340;">0分</strong>
                <strong id="second_show" style="color: #e64340;">0秒</strong>
                <button onclick="cancelRe('{$data.id}')" class="weui-btn weui-btn_warn" style="width: 50px;font-size:12px;height: 25px;padding:0px;line-height: 27px;">取消</button>
            </div>
        </div>
    </div>
    {/if}
    <div class="m-card my-info">
        <div class="card-head">
            <i class="icon-basic-info"></i>
            <span class="card-title">预约说明</span>
        </div>
        <div class="info-item">
            <div>{:zhuanma($explain_info)}</div>
        </div>
    </div>
</div>
</body>

<script>
    //取消预约
    function cancelRe(id){

        $.confirm("是否取消预约", function() {
            //点击确认后的回调函数
            $.ajax({
                url: '{:url(MODULE_NAME.\'/cancelre\')}',
                type: 'post',
                data: {id:id},
                success: function (res) {
                    console.log(res);
                    var data = JSON.parse(res);
                    if(data.info === 'OK'){
                        layer.open({
                            content: '取消成功',
                            skin: 'msg',
                            time: 2 //2秒后自动关闭
                        });
                        setTimeout(function(){
                            window.location.reload();
                        },2000)


                    }else{
                        layer.open({
                            content: data.info,
                            skin: 'msg',
                            time: 2 //2秒后自动关闭
                        });
                    }
                },
                error: function(e) {
                    console.log(e)

                }
            })
        }, function() {
            //点击取消后的回调函数

        });


    }

    var residue = "{$residue}";
    var intDiff = residue;//倒计时总秒数量
    function timer(intDiff){
        if(intDiff == 'none'){
            //后台返回
            return;
        }
        var timerF = window.setInterval(function(){
            if(intDiff <= 0){
                //结束倒计时  刷新页面
                clearInterval(timerF);
                window.location.reload();
            }
            var day=0,
                hour=0,
                minute=0,
                second=0;//时间默认值
            if(intDiff > 0){
                day = Math.floor(intDiff / (60 * 60 * 24));
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            $('#day_show').html(day+"天");
            $('#hour_show').html('<s id="h"></s>'+hour+'时');
            $('#minute_show').html('<s></s>'+minute+'分');
            $('#second_show').html('<s></s>'+second+'秒');
            intDiff--;
        }, 1000);

    }
    $(function(){
        timer(intDiff);
    });
</script>



</html>